<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
    #outerHost { color: red }
</style>
<div>
    <div id="outerHost"></div>
    <div></div>
    <div></div>
</div>
<script>
    description("Insert a style element into a shadow tree affecting the host.");

    var outerRoot = outerHost.attachShadow({mode: 'open'});
    outerRoot.innerHTML = "<div><div id='host1'></div></div><div></div>";

    var host1 = outerRoot.querySelector("#host1");
    var root1 = host1.attachShadow({mode: 'open'});
    root1.innerHTML = "<div><div id='host2'></div></div><div></div>";

    var host2 = root1.querySelector("#host2");
    var root2 = host2.attachShadow({mode: 'open'});
    root2.innerHTML = "This text should be green";

    shouldBeEqualToString("getComputedStyle(host2).color", "rgb(255, 0, 0)");

    document.body.offsetTop;
    var sheet = document.createElement("style");
    sheet.appendChild(document.createTextNode(":host { color: green }"));
    root2.appendChild(sheet);

    if (window.internals)
        shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

    shouldBeEqualToString("getComputedStyle(host2).color", "rgb(0, 128, 0)");
</script>
